<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./css/category.css">
    <script type="text/javascript">
        (function () {
            var docEl = document.documentElement;


            function setRemUnit() {
                // 获取到rem的基准值
                var rem = docEl.clientWidth / 10;

                // 动态设置html根元素的font-size
                docEl.style.fontSize = rem + 'px';
            }

            setRemUnit();

            // 窗口大小变化时 触发
            window.addEventListener('resize', setRemUnit);

            // 窗口出现在当前屏幕时 （有浏览器兼容性）
            window.addEventListener('pageshow', function (e) {
                if (e.persisted) {
                    setRemUnit();
                }
            });
        })(); //自执行匿名函数
    </script>
</head>

<body>
    <div class="category">
        <div class="category-content clearfix menu"></div>
        <!-- <div class="moreMenu2 menu"></div>
        <div class="moreMenu3 menu"></div>
        <div class="moreMenu4 menu"></div> -->

    </div>
    <div id="btnDiv" style="clear: both;"></div>

    <script src="./js/jquery.min.js"></script>
    <script src="./js/category.js"></script>
</body>

</html>